<template>
  <div style="display: flex; justify-content: center; align-items: center; height: 100%;">
    <div id="myEChartsLine" ref="lineChart" style="width: 100%; height: 600px;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import { getMachineDetailss } from "@/exclude-folder/services/DataService1"; // 假设这是你的 API 服务


export default {
  name: 'LineChart',
  mounted () {
    document.title = '折线图';
  },
  data() {
    return {
      chartData: null, // 用于存储从 API 获取的数据
    };
  },
  async created() {
    // 获取查询参数
    const machinename = this.$route.query.machinename;
    const batchname = this.$route.query.batchname;
    try {
      this.chartData = await getMachineDetailss(machinename, batchname);
      this.initLineChart();
    } catch (error) {
      console.error('Error fetching data:', error);
    }
  },
  methods: {
    initLineChart() {
      if (!this.chartData) {
        // 数据可能尚未准备好，你可以在这里添加错误处理或返回
        console.error('Chart data is not available yet.');
        return;
      }

      const rawData = {
        categories: [],
        dataSeries1: [],//运行状态
        dataSeries2: [],//在线状态
        dataSeries5: [],//总水量/吨
        dataSeries6: [],//布吨耗水标准线
      };

      const size = this.chartData.length;
      for (let index = 0; index < size; index++) {
        // const t_machinename = this.chartData[index].t_machinename;
        // console.log(t_machinename);
        // 将 t_supcon_time 添加到 categories
        rawData.categories.push(this.chartData[index].t_supcon_time);

        // 将 t_machinestate 添加到 dataSeries1 运行状态
        const machinestate = (this.chartData[index].t_machinestate === "运行") ? 20 : 10;
        rawData.dataSeries1.push(machinestate);

        // 将 t_machinemode 添加到 dataSeries2 在线状态
        const machinemode = (this.chartData[index].t_machinemode === "中央") ? 10 : 5;
        rawData.dataSeries2.push(machinemode);

        // 将 t_loading_rate 添加到 dataSeries5 布吨耗水
        rawData.dataSeries5.push(this.chartData[index].t_loading_rate);

        // dataSeries6 布吨耗水标准线
        rawData.dataSeries6.push(75);
      }

      const xAxisData = rawData.categories;
      const seriesData = [
        {
          name: '运行状态[运行:20/停止:10]', // 系列名称可以根据需要设置
          type: 'line',
          symbolSize: 0.1,//改变转折点的原点大小
          // stack: 'x', // 堆叠效果
          data: rawData.dataSeries1,
        },
        {
          name: '在线状态[中央:10/单机:5]', // 系列名称可以根据需要设置
          type: 'line',
          symbolSize: 0.1,
          // stack: 'x', // 堆叠效果
          data: rawData.dataSeries2,
        },
        {
          name: '总水量/吨',
          type: 'line',
          symbolSize: 0.1,
          // stack: 'x',
          data: rawData.dataSeries3,
        },
        {
          name: '布重/吨',
          type: 'line',
          symbolSize: 0.1,
          // stack: 'x',
          data: rawData.dataSeries4,
        },
        {
          name: '布吨耗水[(总水量/布重)*100]',
          type: 'line',
          symbolSize: 0.1,
          // stack: 'x',
          data: rawData.dataSeries5,
        },
        {
          name: '布吨耗水标准线',
          type: 'line',
          symbolSize: 0.1,
          // stack: 'x',
          data: rawData.dataSeries6,
        },
      ];

      const chartDom = this.$refs.lineChart;
      const myChart = echarts.init(chartDom);

      const option = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['运行状态[运行:20/停止:10]','在线状态[中央:10/单机:5]', '布吨耗水[(总水量/布重)*100]','布吨耗水标准线']
        },
        xAxis: {
          type: 'category',
          data: xAxisData,
          name: '时刻点'
        },
        yAxis: {
          type: 'value'
        },
        series: seriesData
      };

      myChart.setOption(option);
    }
  }
};
</script>
